<template>
  <div class="card">
    <div style="margin-bottom: 20px">
      <a-select v-model="type" placeholder="请选择跟进类型" style="width: 180px; margin-right: 10px">
        <a-select-option v-for="item in typeOption" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-button type="primary" style="margin-right: 10px" @click="getFollowList">查询</a-button>
      <a-button style="margin-right: 10px" @click="reset">重置</a-button>
      <a-button type="primary" @click="showAdd()">新增</a-button>
    </div>
    <a-spin :spinning="loading">
      <a-table
        bordered
        :columns="columns"
        :data-source="tableData"
        :rowKey="(record, index) => index"
        :pagination="false"
      >
        <span slot="type" slot-scope="text, record">
          <span v-if="record.type == 1">实名</span>
          <span v-if="record.type == 2">绑卡</span>
          <span v-if="record.type == 3">激活</span>
          <span v-if="record.type == 4">分享</span>
          <span v-if="record.type == 5">达标</span>
        </span>
        <span slot="time" slot-scope="text, record">
          <span>{{ record.time }}点</span>
        </span>
        <span slot="status" slot-scope="text, record">
          <span v-if="record.status == 0">关闭</span>
          <span v-if="record.status == 1">开启</span>
        </span>
        <span slot="operate" slot-scope="text, record">
          <a-button type="primary" @click="showEdit(record)">修 改</a-button>
        </span>
      </a-table>
    </a-spin>
    <AddList :isShowAdd.sync="isShowAdd" :typeOption="typeOption" @upload="getFollowList" />
    <EditList
      :isShowEdit.sync="isShowEdit"
      :typeOption="typeOption"
      :transferData="transferData"
      @upload="getFollowList"
    />
  </div>
</template>

<script>
import { getFollowTypeAPI, getFollowListAPI } from '@/api/follow.js'
import AddList from './Dialog/AddList.vue'
import EditList from './Dialog/EditList.vue'
export default {
  name: 'semi-automatic',
  components: {
    AddList,
    EditList
  },
  data() {
    return {
      isShowAdd: false,
      isShowEdit: false,
      transferData: undefined,
      loading: false,
      type: undefined,
      typeOption: [],
      tableData: [],
      columns: [
        {
          title: '品牌',
          dataIndex: 'brand_name',
          align: 'center'
        },
        {
          title: '跟进类型',
          dataIndex: 'type',
          align: 'center',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '内容',
          dataIndex: 'content',
          align: 'center'
        },
        {
          title: '时间点',
          dataIndex: 'time',
          align: 'center',
          scopedSlots: { customRender: 'time' }
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '开始日期',
          dataIndex: 'start_time',
          align: 'center'
        },
        {
          title: '结束日期',
          dataIndex: 'end_time',
          align: 'center'
        },
        {
          title: '创建日期',
          dataIndex: 'utime',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'operate' }
        }
      ]
    }
  },
  created() {
    this.getFollowType()
    this.getFollowList()
  },

  methods: {
    async getFollowType() {
      const { data } = await getFollowTypeAPI()
      this.typeOption = data
    },

    async getFollowList() {
      try {
        this.loading = true
        const { data } = await getFollowListAPI({ brand_id: process.env.VUE_APP_BRAND_ID, search: { type: this.type } })
        this.tableData = data.list
      } finally {
        this.loading = false
      }
    },

    reset() {
      this.type = undefined
      this.getFollowList()
    },

    showAdd() {
      console.log(1)
      this.isShowAdd = true
    },

    showEdit(data) {
      this.transferData = data
      this.isShowEdit = true
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  padding: 20px;
  background-color: #fff;
}
</style>
